<template>
    <el-row>
        <el-col :span="4"></el-col>
        <el-col :span="16">
            <div ref="myChart" id="myChart" :style="{ width: '800px', height: '400px' }"></div>
        </el-col>
        <el-col :span="4"></el-col>
    </el-row>
    <el-row>
        <el-col :span="4"></el-col>
        <el-col :span="16" style="text-align: center;">
            <el-button type="success" round size="large" @click="tpPage(1)">我的订单</el-button>
            <el-button type="primary" round size="large" @click="tpPage(2)">预约服务</el-button>
        </el-col>
        <el-col :span="4"></el-col>
    </el-row>
</template>

<script setup>
import router from "@/router";
import { ref, reactive, getCurrentInstance, onMounted } from "vue"

// 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
let internalInstance = getCurrentInstance();
let echarts = internalInstance.appContext.config.globalProperties.$echarts;

const tpPage = (msg) => {
    if(msg === 1) {
        router.push('/myOrder');
    } else {
        router.push('/submitOrder');
    }
}

// 渲染主页表格
const showEchart = () => {
    const dom = document.getElementById('myChart');
    const myChart = echarts.init(dom); // 初始化echarts实例

    const option = {
        graphic: {
            elements: [
                {
                    type: 'text',
                    left: 'center',
                    top: 'center',
                    style: {
                        text: '家电预约维修',
                        fontSize: 80,
                        fontWeight: 'bold',
                        lineDash: [0, 200],
                        lineDashOffset: 0,
                        fill: 'transparent',
                        stroke: '#000',
                        lineWidth: 1
                    },
                    keyframeAnimation: {
                        duration: 3000,
                        loop: true,
                        keyframes: [
                            {
                                percent: 0.7,
                                style: {
                                    fill: 'transparent',
                                    lineDashOffset: 200,
                                    lineDash: [200, 0]
                                }
                            },
                            {
                                // Stop for a while.
                                percent: 0.8,
                                style: {
                                    fill: 'transparent'
                                }
                            },
                            {
                                percent: 1,
                                style: {
                                    fill: 'black'
                                }
                            }
                        ]
                    }
                }
            ]
        }
    };
    // 设置实例参数
    myChart.setOption(option);
}

onMounted(() => {
    showEchart()
})
</script>

<style lang="scss" scoped></style>
